<template>
  <view>
    <view>
      <view class="page_top" :style="{
        background: topNav ? 'white' : 'transparent',
        'z-index': 199,
      }">
        <top-status></top-status>
        <view class="tabsBack">
          <view @click="goBack()" class="blackbox">
            <!-- <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152491719361330.png"
							mode="widthFix"></image> -->
            <uni-icons :color="topNav ? 'black' : 'lightgray'" type="left" size="30"></uni-icons>
          </view>
          <view class="topTitle hiddenText" v-show="topNav">{{
            $util.entitiesToUtf16(resData.Name)
          }}</view>
        </view>
      </view>

      <view class="page_top" @click="IsOpenBg = !IsOpenBg">
        <!-- <top-status></top-status> -->
        <view class="tabs">
          <image :src="resData.BgImg" mode="aspectFill"></image>
          <view v-if="userid == ID" class="changeImg" @click="changeImg">
            <uni-icons type="image" size="28"></uni-icons>
            <text>换封面</text>
          </view>
        </view>
      </view>
    </view>
    <view class="load" v-if="!load">
      <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
    </view>
    <view v-else class="user_visitior" :class="{ openBg: IsOpenBg }">
      <view class="user_info">
        <view class="info wap">
          <view class="left">
            <view class="cover">
              <image class="headimg" @click="prevAvatar(resData.UserImgs)"
                :src="resData.HeadImgUrl ? resData.HeadImgUrl : ''" mode="aspectFill" />
            </view>
            <view v-if="resData.Tag == '教练'" class="coachbox">
              <!-- <text class="autext">教练</text> -->
              <image class="coachimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710904474666454.png"
                mode="widthFix"></image>
            </view>
            <view v-if="resData.Tag == '星助教'" class="assbox">
              <!-- <text class="autext">星助教</text> -->
              <image class="assistantimg"
                src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710904456266854.png" mode="widthFix"></image>
            </view>
          </view>
          <!-- 数量 -->
          <view class="navBox">
            <!-- <view class="navItem" @click="nav_to(`/pages/user/heSend?ID=${ID}`)">
              <text class="num">{{ getNum(navList.FQ_Num) }}</text>
              <text class="content">发起</text>
            </view> -->
            <view class="navItem" @click="nav_to(`/pages/together/myActivities?userID=${resData.UserID}`)">
              <text class="num">{{ getNum(navList.CY_Num) }}</text>
              <text class="content">报名</text>
            </view>
            <view class="navItem">
              <text class="num">{{ getNum(navList.SY_Num) }}</text>
              <text class="content">爽约</text>
            </view>
            <view class="navItem" @click="lookFun">
              <text class="num">{{ getNum(navList.LL_Num) }}</text>
              <text class="content">访客</text>
            </view>
          </view>
        </view>
        <view class="right" style="flex: 1">
          <view class="right_1">
            <view class="info_r">
              <text class="name hiddenText diyBlock">{{
                resData.Name ? $util.entitiesToUtf16(resData.Name) : "--"
              }}</text>
              <image v-if="resData.UserType != '普通用户'" mode="widthFix"
                src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716367597061433.png"></image>
            </view>
             <block v-if="!IsPayWechat">
              <view @click="lookWX" class="addwx" v-if="userid != ID">
                  <image class="wxjiao" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17250044723191082.png"></image>
                  微信
              </view>
            </block>
            <block v-else>
               <view @click="seeWx" class="addwx" v-if="userid != ID">
                  <image class="wxjiao" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17250044723191082.png"></image>
                  查看微信
              </view>     
            </block>
            <view class="text-edit" v-if="userid == ID" @click="nav_to('/pages/user/user_edit')" :style="userid == ID?'margin-left: auto;':''">
              <text lines="1" class="text_5">编辑资料</text>
            </view>
          </view>
          <view class="mytag">
            <block v-if="tag.length">
              <view class="tag" v-for="(el, i) in tag" :key="i" :style="{ color: randomColor() }">
                {{ el }}
              </view>
            </block>
            <!-- <view class="tag tag_add" v-if="tag.length<3 && userid == ID"  @click="nav_to('/pages/user/tag')">
							<uni-icons type="plusempty" size="12" color="#706eee"></uni-icons>
							标签
						</view> -->
          </view>
          <view class="right_2">
            <text class="Birthday">{{ getYearStr(resData.Birthday) == '未知' ? '00后' : getYearStr(resData.Birthday) + '后'
              }}</text>
            <text class="city">{{ resData.City ? resData.City : "未知" }}</text>
          </view>
        </view>
      </view>
      <view class="selfSay" v-if="resData.Descript">
        <text>{{ $util.entitiesToUtf16(resData.Descript) }}</text>
      </view>

      <view class="mt10" v-if="isManager">
        <view class="user_data" @click="nav_to(`/pages/user/user_data?id=${resData.ID}`)">查看数据</view>
      </view>
      <!-- <view class="ball" v-if="resData.Tag == '星助教' || resData.Tag == '教练'">
        <view class="ball_info">
          <view class="tips">
            <view class="tit">一起挥吧</view>
            <view class="lit">
              服务
              <image class="wujiaox" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17126468552951211.png">
              </image>
            </view>
          </view>
        </view>
        <view class="rightGroup">
          <view class="ballFee" v-if="resData.PlayFee > 0">
            <span class="feeIcon">￥</span>
            <span class="feeNum">{{ resData.PlayFee }}</span>
          </view>
          <view class="ball_btn" @click.stop="toSpheroid()">约Ta一起辉</view>
        </view>
      </view> -->
      <view class="tabbox">
        <view class="navtitle" v-for="(item, index) in tablist" :key="index" :class="{ 'text4': navindex == index }"
          @click="navswitch(index)">
          {{ item }}
          <view v-if="navindex == index" class="aft4"></view>
        </view>
      </view>
      <block v-if="navindex == 0">
      <view class="album">
        <view class="albumTitle">
          <view class="hd">{{ userid == ID ? "我" : "Ta" }}的挥友圈</view>
          <view v-if="userid == ID" class="puadd" @click="nav_to('/pages/dynamic/dynamic_add')">
            <image class="releaseimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716545108243136.png"
              mode="widthFix"></image>
            <view class="putitle">发布</view>
          </view>
        </view>

        <!-- <view class="blackimg"></view> -->
        <view v-if="dynamicList.length > 0">
          <view class="list wap" v-for="(item, index) in dynamicList" :key="index">
            <view class="userbox" @click="gotomyone(item.ID)">
              <image class="userimg" :src="item.HeadImgUrl" mode="aspectFill"></image>
              <view class="middbox">
                <view class="name">{{
                  $util.entitiesToUtf16(item.Name)
                }}
                  <image v-if="item.UserType != '普通用户'" mode="widthFix"
                    src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716367597061433.png"></image>
                </view>
                <view class="daybox">
                  <text class="Birthday">{{ getYearStr(item.Birthday) == '未知' ? '00后' : getYearStr(item.Birthday) + '后'
                    }}</text>
                  <!-- <text class="borderLine">|</text>
                  <text class="city" v-if="item.City">{{
                    item.City
                  }}</text> -->
                </view>
              </view>
              <view class="time">
                {{ getTime(item.CreateTime) }}
              </view>
            </view>
            <view v-if="item.Content" class="content diyC" @click="gotomyone(item.ID)">
              {{ $util.entitiesToUtf16(item.Content).replace(/ /g, "&nbsp;") }}
            </view>
            <Layoutimg v-if="item.IsVideo === 0" :item="item" :ossWatermark="ossWatermark" style="width: 95%;"></Layoutimg>
              <view  class="video_box" v-else @click.stop="">
                <!-- #ifdef MP-WEIXIN -->
                <video :id="'video'+index"  style="position: relative;" :direction="0" :src="JSON.parse(item.Images)[0]" :poster="JSON.parse(item.Images)[0] +
                  '?x-oss-process=video/snapshot,t_1,m_fast,ar_auto'
                  " @play="videoPlay(index)">
                  </video>
                  <!-- #endif -->
                 <!-- #ifdef APP-PLUS -->
                    <view class="v_imgbox" @click="gotovideo(item)">
                      <image class="videoimg" style="max-width:100%;" :src="JSON.parse(item.Images)[0]+ '?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFill">
                    </image>
                    <image class="playimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17259497034651108.png"></image>
                    </view>
                  <!-- #endif -->
              </view>
            <view class="ft_btn">
              <view class="citybottom">
                {{ item.City ? item.City : '' }}
              </view>
              <view class="buttonbox" :class="{ boxWidth: userid == ID }">
                <view class="zan" v-if="userid == ID" @click="del(item.ID)">
                  <uni-icons type="trash" size="24" color="#9b9b9b"></uni-icons>
                </view>
                <view class="zan" @click="zan(item.ID)">
                  <uni-icons type="hand-up" size="24" color="#9b9b9b" v-if="item.IsMyZAN == 0"></uni-icons>
                  <uni-icons type="hand-up-filled" size="24" color="#ef4034" v-else></uni-icons>
                  <text>{{
                    item.CommunityZAN.length > 0 ? item.CommunityZAN.length : ""
                  }}</text>
                </view>
                <view class="zan" @click="tocommit(item.ID, 0)">
                  <uni-icons type="chat" size="24" color="#9b9b9b"></uni-icons>
                  <text>{{
                    item.CommunityComments.length > 0
                      ? item.CommunityComments.length
                      : ""
                  }}</text>
                </view>
                <view class="zan">
                <!-- #ifdef MP-WEIXIN -->
                  <button hover-class="none" open-type="share" :data-id="item.ID">
                      <uni-icons type="redo" size="24" color="#9b9b9b"></uni-icons>
                  </button>
                <!-- #endif -->
                <!-- #ifdef APP-PLUS -->
                <!-- <button hover-class="none" @click="app_share(item)">
										<uni-icons type="redo" size="24" color="#9b9b9b"></uni-icons>
									</button> -->
                <!-- #endif -->
                </view>
              </view>
            </view>
            <view v-if="item.CommunityComments.length > 0" class="Commbox">
              <view class="msgbox" v-for="(value, c_index) in item.CommunityComments" :key="c_index">
                <view class="comment" @click="comment_edit(index, c_index, value.Name)" v-if="value.ReplyID > 0">
                  <text>
                    <text @click.stop="nav_to('/pages/user/user_visitor?id=' + value.UserID)">{{
                      $util.entitiesToUtf16(value.Name) }}</text>
                    <text class="reviewC">回复</text>
                    <text @click.stop="nav_to('/pages/user/user_visitor?id=' + value.Pre_UserID)"> {{
                      $util.entitiesToUtf16(value.Pre_Name) }}:</text>
                  </text>
                  <text>{{ $util.entitiesToUtf16(value.Content) }}</text>
                </view>
                <view class="comment" @click="comment_edit(index, c_index, value.Name)" v-else>
                  <text @click.stop="nav_to('/pages/user/user_visitor?id=' + value.UserID)">{{
                    $util.entitiesToUtf16(value.Name) }}:</text>
                  <text>{{ $util.entitiesToUtf16(value.Content) }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="empty" v-else>
          <u-empty mode="list" width="100" height="100"
            icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true"
            iconSize="32" text="暂无动态"></u-empty>
        </view>
      </view>
      </block>
      <block v-if="navindex == 1">
          <view class="cirlistBox">
          <block v-if="teamlist.length > 0">
            <view class="cirlist" v-for="(item, index) in teamlist" :key="index"
              :style="item.Logo ? 'background-image: url(' + (item.Logo) + ');background-size: cover;background-repeat:no-repeat;' : 'background-color:#fff'"
              @click="nav_to('/pages/together/cirDetail?id=' + item.ID)">
              <view class="cirinfobox">
                <image class="hdimg" :src="item.Logo ? item.Logo : ''" mode="aspectFill"></image>
                <view class="cirinfo">
                  <view class="cirname">{{ item.TeamName ? $util.entitiesToUtf16(item.TeamName) : '' }}</view>
                  <view class="cirrem hiddenText">{{ $util.entitiesToUtf16(item.Tips) }}</view>
                </view>
                <!-- <view class="cirquit" v-if="item.IsJoin == 1" @click.stop="quitTeam(item, index)">
            <view class="jointext">退出</view>
          </view> -->
                <view v-if="item.IsJoin == 0" class="cirjoin" @click.stop="JoinTeam(item.ID, index)">
                  <image class="joinimg"
                    src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716545108243136.png">
                  </image>
                  <view class="jointext">加入</view>
                </view>
              </view>
              <view class="activitybox">
                <block v-if="item.PartList.length > 0">
                  <view class="actcon" v-for="(value, i) in item.PartList" :key="i"
                    @click.stop="nav_to('/pages/ball/ball_details?id=' + value.ID)">
                    <image class="actimg" :src="value.Images ? value.Images.split(',')[0] : ''" mode="aspectFill">
                    </image>
                    <view class="actright">
                      <view class="actname">{{ $util.entitiesToUtf16(value.Title) }}</view>
                      <view class="actgup">
                        <image class="actgupimg"
                          src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722252582451895.png"></image>
                        <view class="actguptext hiddenText">{{ `${getTime2(value.ServerDate)} ${getWeek(value.ServerDate)}
                          ${value.ServerTime}` }}</view>
                      </view>
                      <view class="actgup">
                        <image class="actgupimg"
                          src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152361921951044.png"></image>
                        <view class="actguptext hiddenText">{{ value.Place }}</view>
                      </view>
                      <view class="actgup2">
                        <view class="peoplenum">{{ value.Item ? value.Item.length + '人' : '0人' }}</view>
                        <!-- <image class="peoImg" src=""></image> -->
                        <view class="imgbox" v-if="imglist1(value.Item).length > 0">
                          <image class="peoImg" v-for="(items, is) in imglist1(value.Item)" :key="is"
                            :src="items.HeadImgUrl" mode="aspectFill"></image>
                        </view>
                      </view>
                    </view>
                  </view>
                </block>
              </view>
              <view class="blackshadow2"></view>
            </view>
            <view style="height: 100rpx;"></view>
          </block>
          <block v-else>
            <view class="empty">
              <u-empty mode="list" width="100" height="100"
                icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true"
                iconSize="32" :text="'您还未加入圈子'"></u-empty>
            </view>
          </block>
        </view>
      </block>
      <!-- <view class="bottombox">
        <view class="box_6" :class="{ isNone: IsOpenBg }" v-if="userid != ID"> -->
          <!-- #ifdef MP-WEIXIN -->
          <!-- <view class="image-text_1" @click="$refs.shareWX.open()">
            <button type="default" data-name="shareBtn" style="background-color: transparent; color: white">
              <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715249843316868.png" mode="widthFix">
              </image>
            </button>
            <text lines="1" class="text-group_2">分享</text>
          </view>
          <view class="text-wrapper_1" @click="goContact">
            <text lines="1" class="text_11">极速联系</text>
          </view> -->
          <!-- #endif -->
          <!-- #ifdef APP-PLUS -->
          <!-- <view class="text-wrapper_1" @click="goContact" style="flex: 1;">
            <text lines="1" class="text_11">极速联系</text>
          </view> -->
          <!-- #endif -->
        <!-- </view>
      </view> -->

    </view>
    <uni-popup ref="WXup" type="center" :mask-click='false'>
      <view class="wxcodebox">
        <view class="wxinfo">
          <image class="wxheimg" :src="resData.HeadImgUrl" mode="aspectFill"></image>
          <view class="wxuserbox">
              <view class="wxname">{{resData.Name}}</view>
              <view class="wxbir">{{(getYearStr(resData.Birthday) == '未知' ? '00后' : getYearStr(resData.Birthday) + '后') +' | '+resData.City}}</view>
          </view>
        </view>
        <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17157621475961272.png" class="closebtn" @click="closewx"></image>
        <image class="Wximg" mode="aspectFill"  :src="resData.WechatImg" @click="lookwximg(resData.WechatImg)"></image>
        <view class="savebtn" @click="saveWx">保存图片</view>
      </view>
      
    </uni-popup>
    <!-- 微信 分享 转发好友、朋友圈 -->
    <!-- #ifdef MP-WEIXIN -->
    <uni-popup ref="shareWX" type="bottom">
      <view class="x-share">
        <button hover-class="none" open-type="share" class="item" @click="$refs.shareWX.close()">
          <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png" style="margin-bottom: -8rpx;">
          </image>
          <span style="margin-bottom: -18rpx;font-size: 32rpx;">转发好友</span>
        </button>
        <button class="item" @click="wxSharePYQ()">
          <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png" style="margin-bottom: -8rpx;">
          </image>
          <span style="margin-bottom: -18rpx;font-size: 32rpx;">分享朋友圈</span>
        </button>
      </view>

    </uni-popup>
    
    <uni-popup ref="shareTips">
      <view class="share_tips">
        <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715929661502368.png" mode="widthFix"></image>
        <view class="tips_close" @click="$refs.shareTips.close()">
          我知道了
        </view>
      </view>
    </uni-popup>
    <!-- #endif -->
    <!-- APP 分享 转发好友、朋友圈 -->
    <!-- #ifdef APP-PLUS -->
    <uni-popup ref="share" type="bottom">
      <view class="x-share">
        <view class="item" @click="shareWX()">
          <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"></image>
          <span>转发好友</span>
        </view>
        <view class="item" @click="sharePYQ()">
          <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png"></image>
          <span>分享朋友圈</span>
        </view>
      </view>
    </uni-popup>
    <!-- #endif -->

    <inputBox :commit="commit2" @submit="submit" @onBlur="onBlur"></inputBox>
  </view>
</template>

<script>
import topStatus from "@/components/topStatus/topStatus.vue";
import inputBox from "./components/input-box.vue";
import Layoutimg from "@/components/Layoutimg/Layoutimg.vue";
export default {
  components: {
    topStatus,
    inputBox,
    Layoutimg
  },
  tabTop: 0,
  data() {
    return {
      IsPayWechat:false, //是否已购买微信
      teamlist:[],
      navindex:0,
      tablist:['挥友圈','圈子'],
      IsOpenBg: false,
      userid: null,
      Issex: null,
      textMore: false,
      _freshing: true,
      load: false,
      resData: {},
      ID: null,
      oldList: [],
      imglist: [],
      shareTitle: "挥友", //转发的标题
      sharePath: "", //转发的页面
      shareImg: "",
      PageIndex: 1,
      PageSize: 30,
      CompanyID: 6002,
      isMore: true,
      imglistLlength: 0,
      isFriend: 0,
      FriendPath: {},
      isAdmin: true,
      mutual_friends: [],
      isMyself: false,
      isHideFriend: true,
      isManager: false,
      dynamicList: [],
      dynamicLength: 0,
      cz_price: 100,
      zan_id: 0,
      cache_user: {},

      gift: [], //礼物数组
      gift_active: -1, //当前选中礼物
      sel_community: "",

      is_superlike: false,
      superlike_num: 0,

      convInfo: {},

      my_wechat: "",
      IsAuditApplyWX: 3,

      CurrentUserType: "普通用户",
      CurrentFreeNum: 0,

      price_index: 0,
      member_price: 198, // 男生费用
      wmember_price: 99, // 女生费用
      is_first_upgrade: false,

      is_save_userbrowse: true, //是否保存用户浏览日志

      //人气榜排名
      pop_seq: 0,
      //消费榜排名
      con_seq: 0,

      //微信价格
      wx_price: 200,
      is_promotion: 0,

      ossPath: null,
      commit2: false,
      review_id: 0,
      comment_id: 0,

      topNav: false, //吸顶
      repName: "",
      isRegUser: 0,
      lastScrollTop: 0,
      navList: {},
      tag: [],
      tagColor: [
        '#706eee',
        '#706eee',
        '#706eee',
        '#706eee'
      ],
      tagAdd: true,
      tagVal: '',
      isShare: 0,
      ossWatermark: ""
    };
  },
  onPullDownRefresh() {
    this.$pv.load("刷新中");
    this.dynamicList = [];
    this.PageIndex = 1;
    this.getDynamicList();
    this.getMemberList()
  },
  computed: {
    getWechatNo(l) {
      return (l) => {
        if (l) {
          let arr = l.split("");
          arr.splice(2, arr.length - 4, "***");
          let str = arr.join("");
          return str;
        } else {
          return "--";
        }
      };
    },
    getDesc(l) {
      return (l) => {
        if (l) {
          return this.handlerStr(l);
        } else {
          return "--";
        }
      };
    },
  },
  async onShow() {
    this.ossPath = this.$ossPath;
    if (this.$store.state.Refresh) {
      this.dynamicList = [];
      this.PageIndex = 1;
      this.getDynamicList();
      this.getMemberList()
    }
  },
  onPageScroll(e) {
    //nvue暂不支持滚动监听，可用bindingx代替
    if (e.scrollTop > this.lastScrollTop) {
      // 向下滚动
      if (e.scrollTop >= 230) {
        this.topNav = true; // 你的逻辑
      }
      this.IsOpenBg = false; // 滚动条向上滚时执行的逻辑
    } else {
      // 向上滚动
      if (e.scrollTop < 230) {
        this.topNav = false; // 你的逻辑
      }
    }
    this.lastScrollTop = e.scrollTop <= 0 ? 0 : e.scrollTop;
  },
  async onLoad(e) {
    this.userid = uni.getStorageSync("user").UserID;
    this.getLogo()
    if (e.id) {
      this.ID = e.id;
    } else if (e.scene) {
      console.timeLog("sence====" + e.scene);
      this.ID = e.scene;
    }
    this.IsApply()
    this.pop_seq = 0;
    if (e.isShare == 1) {
      this.isShare = e.isShare
      this.init();
    }
    if (e.ub == -1) {
      //有些页面过来的浏览不保存记录
      this.is_save_userbrowse = false;
    }
    // #ifdef MP-WEIXIN
    if (await this.$store.getters.getLoginState) {
      //刷新用户状态
      this.upDateInfo();

      this.cache_user = uni.getStorageSync("user");

      this.CurrentUserType = this.cache_user.UserType;
      if (this.CurrentUserType == "金卡会员") {
        this.CurrentFreeNum = 1;
      } else if (this.CurrentUserType == "年卡会员") {
        this.CurrentFreeNum = 2;
      } else if (this.CurrentUserType == "黑金年卡会员") {
        this.CurrentFreeNum = 3;
      } else if (
        this.CurrentUserType == "普通用户" ||
        this.CurrentUserType == "体验会员"
      ) {
        this.CurrentFreeNum = 0;
      }

      this.init();
    }
    // #endif

    // #ifdef APP-PLUS

    //刷新用户状态
    this.upDateInfo();

    this.cache_user = uni.getStorageSync("user");
    this.CurrentUserType = this.cache_user.UserType;
    if (this.CurrentUserType == "金卡会员") {
      this.CurrentFreeNum = 1;
    } else if (this.CurrentUserType == "年卡会员") {
      this.CurrentFreeNum = 2;
    } else if (this.CurrentUserType == "黑金年卡会员") {
      this.CurrentFreeNum = 3;
    } else if (
      this.CurrentUserType == "普通用户" ||
      this.CurrentUserType == "体验会员"
    ) {
      this.CurrentFreeNum = 0;
    }

    this.init();
    // #endif

    this.getMemberList();
    uni.$on('tag', async () => {
      let res = await this.$api.post('User/GetUserInfo', {
        ID: this.ID
      });
      this.resData = res?.data;
      if (res.data.Tag) {
        this.tag = res.data.Tag.split(',')
      } else {
        this.tag = []
      }
    })
  },

  onShareAppMessage(e) {
    //发送给朋友
    // let trendsIndex = e.target.dataset.trendsIndex;
    // if (e.target) {
    //   let trendsId = e.target.dataset.id; //有id是分享单独的动态
    //   let trendtype = e.target.dataset.type; //有type是分享这个页面
    //   if (trendsId > 0) {
    //     let o = this.dynamicList.find((item) => item.ID == trendsId);
    //     let pid = uni.getStorageSync("user").UserID;

    //     this.shareTitle = "挥友精彩瞬间，您不容错过";
    //     this.sharePath = "pages/dynamic/detail?pid=" + pid + "&id=" + trendsId;
    //     this.shareImg =
    //       o.IsVideo == 1
    //         ? JSON.parse(o.Images)[0] +
    //           "?x-oss-process=video/snapshot,t_1,m_fast,ar_auto"
    //         : JSON.parse(o.Images)[0];
    //     return {
    //       title: this.shareTitle,
    //       path: this.sharePath,
    //       imageUrl: this.shareImg,
    //     };
    //   }
    //   if (trendtype > 0) {
    //     // let o = this.resData.UserImgs;
    //     let pid = uni.getStorageSync("user").UserID;

    //     this.shareTitle = "挥友精彩瞬间，您不容错过";
    //     this.sharePath =
    //       "pages/user/user_visitor?pid=" + pid + "&id=" + trendtype;
    //     this.shareImg = this.resData.UserImgs;
    //     return {
    //       title: this.shareTitle,
    //       path: this.sharePath,
    //       imageUrl: this.shareImg,
    //     };
    //   }
    // } else {
    // let id = this.cache_user.UserID;
    // let Name = this.$util.entitiesToUtf16(this.cache_user.Name);
    // if (this.resData.Sex == "女") {
    //   return {
    //     title: `${Name}给你推荐了一位挥友美女`,
    //     path: `/pages/user/user_visitor?pid=${id}&id=${this.resData.ID}`,
    //     imageUrl: this.resData.UserImgs,
    //   };
    // } else {
    //   return {
    //     title: `${Name}给你推荐了一位挥友高手`,
    //     path: `/pages/user/user_visitor?pid=${id}&id=${this.resData.ID}`,
    //     imageUrl: this.resData.UserImgs,
    //   };
    // }
    // }
      let trendsId = e.target.dataset.id;
        let o = this.dynamicList.find((item) => item.ID == trendsId);
        let pid = uni.getStorageSync("user").UserID;

        //console.log("pages/dynamic/detail?pid=" + pid + "&id=" + trendsId);

        this.shareTitle = "挥友精彩瞬间，您不容错过";
        this.sharePath = "pages/dynamic/detail?pid=" + pid + "&id=" + trendsId;
        this.shareImg =
          o.IsVideo == 1
            ? JSON.parse(o.Images)[0] +
              "?x-oss-process=video/snapshot,t_1,m_fast,ar_auto"
            : JSON.parse(o.Images)[0];
        return {
          title: this.shareTitle,
          path: this.sharePath,
          imageUrl: this.shareImg,
        };
  },
  //分享朋友圈
  onShareTimeline() {
    let Name = this.$util.entitiesToUtf16(this.cache_user.Name);
    return {
      title: `${Name}给你推荐了一位挥友${this.resData.Sex == "女" ? '美女' : '高手'}`,
      query: "id=" + this.ID + '&isShare=1',
    };
  },
  methods: {
    gotovideo(item){
      let src = JSON.parse(item.Images)[0]
      this.nav_to('/pages/album/myVideo?src='+src)
    },
    gotomyone(id){
      if(this.userid == this.ID){
        this.nav_to('/pages/dynamic/detail?id='+id)
      }else{
        return
      }
    },
    //是否已购买微信
    async IsApply(){
      let res = await this.$api.post('Friend/IsApply',{
          ToUserID:this.ID,
          UserID:this.userid,
      })
      if(res.code == 0){
        this.IsPayWechat = res.data
      }
    },
    closewx(){
      this.$refs.WXup.close()
    },
    //加微信
    seeWx(){
      this.$refs.WXup.open()
    },
    async lookWX(){
      if(!this.resData.WechatImg){
        this.$pv.msg('对方还未设置微信二维码');
				return;
      }
      let _this = this
      uni.showModal({
          title: "温馨提示",
          content: `您确定要支付${this.resData.AddWechatFee}元，来解锁微信吗？`,
          confirmText: "确定",
          success: async(rs) => {
            if (rs.confirm) {
            let r_wc = await _this.$api.post('Friend/ApplyWechatNo', {
              ToUserID: _this.ID
            });
            let pres = await _this.$api.post('Payment/PayV2', {
              total_fee: _this.resData.AddWechatFee,
              EventType: '申请微信',
              EventID: r_wc.data,
              body: '加微信',
              SourcePage: 'user_visitor',
              // #ifdef MP-WEIXIN
              PayChannel: 'weixin',
              // #endif
              // #ifdef APP
              PayChannel: 'app'
              // #endif
            });
            if (pres.data == 0) {
              //已余额支付成功
              this.$refs.WXup.open()
              return;
            }
            let payObj = JSON.parse(pres.data);
            uni.requestPayment({
              provider: 'wxpay',
              // #ifdef APP
              orderInfo: payObj,
              // #endif
              // #ifdef MP-WEIXIN
              timeStamp: payObj.timeStamp,
              nonceStr: payObj.nonceStr,
              package: payObj.package,
              signType: payObj.signType,
              paySign: payObj.paySign,
              // #endif
              success(res) {
                _this.$refs.WXup.open()
                _this.IsApply()
              },
              fail(err) {
                _this.$pv.msg('取消了支付');
              }
            });
            } else if (rs.cancel) {

						}
            
          },
        });

    },
    saveWx(){
      	uni.downloadFile({ //下载
				url: this.resData.WechatImg, //图片下载地址
				success: res => {
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
							filePath: res.tempFilePath, //图片文件路径
							success: function() {
								uni.showToast({
									title: '图片保存成功',
									icon: 'none',
								});
							},
							fail: function(e) {
								console.log(e);
								uni.showToast({
									title: '图片保存失败',
									icon: 'none',
								});
							}
						});
					}
				}
			});

    },
    //视频播放
    videoPlay(index){
      let video = uni.createVideoContext("video"+index,this)
      // video.play();
      for (let i = 0; i < this.dynamicList.length; i++) {
        if(i !=index){
          let video2 = uni.createVideoContext("video"+i,this)
          video2.pause()
        }
        
      }
    },
    imglist1(e) {
      if (!e) {
        return []
      }
      let list = e.slice(0, 6)
      return list
    },
    getTime2(l) {
      let d = new Date(l);
      let timestamp = d.getTime();
      return this.$util.unixDatetime(timestamp, 'year');
    },
    navswitch(index) {
      this.navindex = index
      if (index == 0) {
        this.PageIndex = 1
        this.dynamicLis = []
        this.getDynamicList()
      } else if (index == 1) {
        this.MyTeam()
      }
    },
    async MyTeam() {
      this.teamlist = []
      let res = await this.$api.post("Team/UserTeam", {
        UserID:this.resData.UserID
      })
      if (res.code == 0) {
        this.teamlist = res.data
      }
    },
    getLogo() {
      this.ossWatermark = this.$ossWatermark
    },
    wxSharePYQ() {
      this.$refs.shareWX.close()
      this.$refs.shareTips.open()
    },
    tagInp(e) {
      this.tagVal = e?.detail?.value.substring(0, 8)
    },
    async tagFun() {
      let con = this.tagVal.trim().replace(' ', '')
      if (!con) {
        this.tagVal = ''
        this.$pv.msg('请输入内容')
        return
      }
      let res = await this.$api.post('/Member/AddTag', {
        Tag: this.tagVal
      })
      if (res.code == 0) {
        this.$pv.msg('添加完成');
        this.init()
        this.closeTagPopup()
      } else {
        this.$pv.msg(res.message);
      }
    },
    randomColor() {
      let num = Math.floor(Math.random() * 4)
      return this.tagColor[num]
    },
    async getMemberList() {
      this.navList = []
      let res = await this.$api.post("Member/GetMemberData", {
        ID: this.ID,
      });
      if (res.code == 0) {
        this.navList = res.data;
      }
    },

    getNum(num) {
      let showResult = num;
      if (num > 9999) {
        let wan = parseInt(num / 10000);
        let qian = parseInt((num / 1000) % 10);
        showResult = wan + (qian != 0 ? "." + qian : "") + "w";
        return showResult;
      }
      return showResult;
    },
    openBg() {
      console.log("背景图展开");
    },
    changeImg() {
      try {
        let _this = this;
        uni.chooseImage({
          count: 1, //默认9
          mediaType: ["image"],
          sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ["camera", "album"], //从相册选择
          success: async function (res) {
            let upImg = await _this.$upload(res.tempFiles[0].path, (res) => { });
            _this.subFix(upImg);
          },
        });
      } catch (error) {
        this.$pv.msg("图片上传失败");
      }
    },
    async subFix(BgImg) {
      let res = await this.$api.post("User/UpdateUserBG", { BgImg });
      if (res.code == 0) {
        this.resData.BgImg = BgImg;
        this.$pv.msg("修改成功");
      }
    },
    onBlur(emit) {
      setTimeout(() => {
        this.commit2 = emit;
      }, 500)

    },
    goBack() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        // 如果页面栈长度大于1，则说明有上一页，可以返回
        uni.navigateBack();
      } else {
        // 如果没有上一页，则导航到首页
        uni.reLaunch({
          url: '/pages/tab/home'
        });
      }
    },
    async goContact() {
      let user = uni.getStorageSync("user");
      if (user.IsAuth != 1) {
        uni.showModal({
          title: "温馨提示",
          content: "您还没注册，请先注册",
          confirmText: "确定",
          success: (rs) => {
            if (rs.confirm) {
              this.nav_to("/pages/start/start2");
            }
          },
        });
        return;
      }
      if (this.resData.ID) {
        let res = await this.$api.post("/Friend/IsMyFriends", {
          FriendID: this.resData.ID,
        });
        if (res.code == 0) {
          if (!res.data) {
            this.nav_to(`/pages/user/fastContact?id=${this.resData.ID}`);
            return;
          }
          this.$pv.msg("您已经联系过对方了");
          return;
        }
        this.$pv.msg("网络出错了！");
      }
    },
    //回复消息
    comment_edit(index, c_index, Name = "") {
      let _this = this;
      _this.repName = Name;
      const user = uni.getStorageSync("user");

      const item = this.dynamicList[index].CommunityComments[c_index];

      if (user.ID == item.UserID) {
        uni.showActionSheet({
          itemList: ["删除评论"],
          success: function (res) {
            if (res.tapIndex == 0) {
              _this.delReview(index, c_index);

              return;
            }
          },
          fail: function (res) { },
        });
      } else {
        //直接回复
        this.tocommit(item.CommunityID, item.ID);
      }
    },
    // 评论
    tocommit(ID, C_ID) {
      let user = uni.getStorageSync("user");
      if (user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还没注册，请先注册",
          confirmText: "确定",
          success: (rs) => {
            if (rs.confirm) {
              this.nav_to("/pages/start/start2");
            }
          },
        });
        return;
      }
      this.commit2 = !this.commit2;
      this.review_id = ID;
      this.comment_id = C_ID;
    },
    async delReview(index, c_index) {
      const item = this.dynamicList[index].CommunityComments[c_index];

      let res = await this.$api.post("/Community/DeletePage", {
        ID: item.ID,
      });
      this.$pv.msg("删除成功");
      this.$store.commit('changeRefresh', true)
      this.dynamicList[index].CommunityComments.splice(c_index, 1);
    },
    async submit(val) {
      if (val != "") {
        let utf16 = this.$util.utf16ToEntities(val).slice(0, 200);
        let res = await this.$api.post("/Community/UserComment", {
          CommunityID: this.review_id,
          Content: utf16,
          CompanyID: 6002,
          ReplyID: this.comment_id,
        });
        if (res.code == 0) {
          console.log("user====>", res);
          this.dynamicList.forEach((item, index) => {
            if (item.ID == this.review_id) {
              item.CommunityComments.push({
                UserID: uni.getStorageSync("user").UserID,
                HeadImgUrl: uni.getStorageSync("user").HeadImgUrl,
                Name: uni.getStorageSync("user").Name,
                Content: val,
                CreateTime: new Date(),
                ReplyID: this.comment_id,
                Pre_Name: this.repName,
                ID: res.data
              });
              this.dynamicList.splice(index, 1, item);
              console.log(item.ID, this.review_id);
            }
          });

          this.commit2 = !this.commit2;
        }
      } else {
        this.$pv.msg("评论不能为空");
      }
    },
    nav_back() {
      uni.navigateBack({
        delta: 1,
      });
    },

    async get_superlike() {
      let res = await this.$api.post("Community/MyFans", {
        UserID: this.ID,
      });

      if (res.data) {
        this.superlike_num = res.data.length;
      }
    },

    app_share(item) {
      this.sel_community = item;
      this.$refs.share.open();
    },

    async upDateInfo() {
      let res = await this.$api.post("User/GetUserInfo", {
        ID: uni.getStorageSync("user").UserID,
      });
      let user = res.data;
      user.UserID = res.data.ID;
      this.Issex = res.data.Sex;
      uni.setStorageSync("user", user);
      this.$store.commit("setUser", user);
    },

    // 赞
    async zan(item) {
      this.zan_id = item;
      let user = uni.getStorageSync("user");
      if (user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还没注册，请先注册",
          confirmText: "确定",
          success: (rs) => {
            if (rs.confirm) {
              this.nav_to("/pages/start/start2");
            }
          },
        });
        return;
      }
      let res = await this.$api.post("Community/ZAN", {
        ID: item,
      });

      if (JSON.stringify(res.data) == "true") {
        this.$pv.msg("点赞成功");

        this.dynamicList.forEach((item, index) => {
          if (item.ID == this.zan_id) {
            item.IsMyZAN = 1;
            item.CommunityZAN.push({
              UserID: this.cache_user.UserID,
              HeadImgUrl: this.cache_user.HeadImgUrl,
            });
            this.dynamicList.splice(index, 1, item);
          }
        });
      } else {
        this.$pv.msg(res.message);
      }
    },

    handlerStr(str) {
      let phoneReg =
        /(1[0-9]{10})|([0-9]{3,4})?[0-9]{7,8}|[0-9]{3,4}-[0-9]{7,8}/g;
      let num = str.replace(/\s*/g, "");
      let phone = num.match(phoneReg);
      if (!phone) return str;
      for (let i = 0; i < phone.length; i++) {
        str = str.replace(phone[i], "****");
      }
      return str;
    },
    lookwximg(url1){
      uni.previewImage({
        urls: [url1],
        current: 0,
      });
    },
    lookimg(url, index) {
      let arr = JSON.parse(url);
      arr = arr.map(item => item + this.ossWatermark)
      uni.previewImage({
        urls: arr,
        current: index,
      });
    },
    prevAvatar(url) {
      uni.previewImage({
        current: 0,
        urls: [url],
      });
    },
    lookFun() {
      if (this.userid == this.ID) {
        this.nav_to('/pages/user/visitor_list')
      }
    },
    async toSpheroid() {
      let user = uni.getStorageSync("user");
      let res = await this.$api.post("User/GetUserInfo", {
        ID: user.UserID,
      });

      this.cache_user = res.data;

      if (this.cache_user.IsAuth == 0) {
        let _this = this;
        uni.showModal({
          title: "温馨提示",
          content: "非注册用户不能参与活动，请注册账号",
          confirmText: "关闭",
          cancelText: "注册账号",
          success: function (res) {
            if (res.confirm) {
              uni.navigateBack({
                delta: 1,
              });
            } else if (res.cancel) {
              _this.nav_to("/pages/start/start2");
            }
          },
        });
        return;
      }

      if (this.cache_user.UserType == "普通用户") {
        this.$refs.member_upgrade.open();
        return;
      }

      if (this.ID === this.cache_user.UserID) {
        this.$pv.msg("不能和自己参加活动");
        return;
      }
      this.ran_to_add_ball(`/pages/ball/reservation?inviteId=${this.ID}`);
    },

    //下拉刷新
    async onRefresh() {
      this.init();

      //刷新用户状态
      this.upDateInfo();

      setTimeout(() => {
        uni.$emit("triggered");
      }, 2000);
    },
    //滚动到底部触发
    async scrolltolower() {
      this.PageIndex++;

      this.getDynamicList();
    },

    async init() {
      let _this = this;

      let res = await this.$api.post("User/GetUserInfo", {
        ID: this.ID,
      });
      if (res.data) {
        this.resData = res.data;
        this.load = true;
      }
      if (res.data.Tag) {
        this.tag = res.data.Tag.split(',')
      } else {
        this.tag = []
      }

      uni.setNavigationBarTitle({
        title: _this.resData.Name + "的主页",
      });

      if (!this.resData.Descript) this.resData.Descript = "";
      if (!this.resData.IsHideFriend) this.isHideFriend = 0;


      //需要展示共同好友，则加载共同好友
      // if (this.isHideFriend == 0) {
      //   let m_friend = await this.$api.post("Friend/FirendRelation", {
      //     ID: this.ID,
      //   });
      //   if (m_friend.data) {
      //     this.mutual_friends = m_friend.data;
      //     if (this.mutual_friends.length > 0) this.isHideFriend = true;
      //     else this.isHideFriend = false;
      //   }
      // } else {
      //   this.isHideFriend = false;
      // }
      await this.getDynamicList();
      // 分享朋友圈进来的，直接return
      if (this.isShare == 1) {
        return
      }
      if (this.is_save_userbrowse) {
        await this.$api.post("Member/AddUserBrowse", {
          BrowseUserID: this.ID,
        });
      }

      // let fp_data = await this.$api.post('/Friend/RecommendRelation', {
      // 	ID: this.ID
      // });

      // if (fp_data.data) {
      // 	this.FriendPath = fp_data.data;
      // }

      let f_data = await this.$api.post("/Friend/IsMyFriends", {
        FriendID: this.ID,
      });

      if (f_data.data) {
        this.isFriend = 1;
      } else {
        this.isFriend = 0;
      }

      //获取人气榜排名
      let pop_data = await this.$api.post("/Member/GetMemberPopSeq", {
        UserID: this.ID,
      });
      if (pop_data.data) {
        this.pop_seq = pop_data.data;
      }
      //获取人气榜排名
      let con_data = await this.$api.post("/Member/GetMemberComSeq", {
        UserID: this.ID,
      });
      if (con_data) {
        this.con_seq = con_data.data;
      }
      //人气排名 和 消费排名 哪个排名靠前，就显示哪个，两者选1
      if (this.pop_seq > 0 && this.con_seq > 0) {
        if (this.pop_seq < this.con_seq) {
          this.con_seq = 0;
        } else {
          this.pop_seq = 0;
        }
      }

      this.PageIndex = 1;
      this.oldList = [];


      if (this.ID == this.cache_user.UserID) {
        this.isMyself = true;
        this.is_superlike = true;
      } else {
        let att_data = await this.$api.post("/Member/IsAttention", {
          FocusUserID: this.ID,
        });
        this.is_superlike = att_data.data;
      }

      let mf_data = await this.$api.post("/Member/IsFirstUpgrade");

      this.is_first_upgrade = mf_data.data;

      this.get_superlike();
      let d = await this.$api.post("Company/IsCompanyAdmin");
      if (d.data) this.isManager = true;

      //this.$refs.weixin.open();
    },
    async getDynamicList() {
      let res = await this.$api.post("Community/UserCommunity", {
        UserID: this.ID,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
        CompanyID: 6002,
      });
      let l = this.dynamicList.concat(res.data);
      this.dynamicList = this.clearRepetition(l, "ID");
      this.dynamicLength = this.dynamicList.length;
      this.$pv.closeLoad();
    },

    // 去重,后面的覆盖前面的
    clearRepetition(arr, key = "id") {
      let newArr = [];
      arr.forEach((item) => {
        let index;
        let check = newArr.every((newItem, i) => {
          if (item[key] !== newItem[key]) {
            index = -1;
            return true;
          } else {
            index = i;

            return false;
          }
        });
        if (check) {
          newArr.push(item);
        } else {
          newArr.splice(index, 1, item);
        }
      });
      return newArr;
    },
    sharePYQ() {
      const user = uni.getStorageSync("user");

      const pid = user.UserID;
      let id = this.sel_community.ID;

      const BaseUrl = "http://h5.golf.xiaojusmart.com/#/";
      const paseUrl = `pages/H5/cm_detail?id=${id}&pid=${pid}`;
      let shareUrl = BaseUrl + paseUrl;

      uni.share({
        provider: "weixin",
        scene: "WXSceneTimeline",
        type: 0,
        href: shareUrl,
        title: "【挥友圈】发现精彩的挥友动态，赶快来围观吧",
        // summary: _this.goodsDetails.ProductName,
        imageUrl:
          "https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg",
        success: (res) => {
          this.$refs.share.close();
        },
        fail(err) {
          console.log("fail:" + JSON.stringify(err));
        },
      });
    },
    shareWX() {
      const user = uni.getStorageSync("user");

      const pid = user.UserID;
      let id = this.sel_community.ID;

      const BaseUrl = "http://h5.golf.xiaojusmart.com/#/";
      const paseUrl = `pages/H5/cm_detail?id=${id}&pid=${pid}`;
      let sharUrl = BaseUrl + paseUrl;
      let _this = this;
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 5,
        imageUrl:
          "https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg",
        title: "【挥友圈】发现精彩的挥友动态，赶快来围观吧",
        miniProgram: {
          id: "gh_ff1a33213d99",
          path: "pages/dynamic/detail?id=" + id + "&pid=" + pid,
          type: 0,
          webUrl: sharUrl,
        },
        success: (res) => {
          this.$refs.share.close();
        },
        fail(err) {
          console.log("fail:" + JSON.stringify(err));
        },
      });

      // this.is_app_share_show = false;
    },
    async del(ID) {
      let _this = this;
      let index = this.dynamicList.findIndex((item) => item.ID === ID);
      uni.showModal({
        title: "温馨提示",
        content: "您确定要删除这条动态吗?",
        confirmText: "删除",
        success: async function (res) {
          if (res.confirm) {
            let res = await _this.$api.post("/Community/Delete", {
              ID: ID,
            });
            _this.dynamicList.splice(index, 1);
            _this.$store.commit('changeRefresh', true)
            uni.$emit('update')
          } else if (res.cancel) {
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
button::after {
  border: none;
}
.wxcodebox{
    width: 536rpx;
    // height: 736rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 64rpx 72rpx;
    .wxinfo{
      display: flex;
      align-items: center;
      margin-bottom: 60rpx;
      .wxheimg{
        width: 80rpx;
        height: 80rpx;
        border-radius: 16rpx;
        backdrop-filter: blur(4px);
        margin-right: 12rpx;
      }
      .wxuserbox{
        .wxname{
          font-size: 28rpx;
          font-weight: bold;
          color: #333333;
        }
        .wxbir{
          font-size: 20rpx;
          color: #999999;
        }
      }
    }
  .closebtn{
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    top: 24rpx;
    right: 32rpx;
  }
  .Wximg{
    width: 392rpx;
    height: 392rpx;
    // background-color: red;
  }
  .codetetx{
    color: #fc4f45;
		font-size: 24rpx;

  }
  .savebtn{
    width: 400rpx;
    height: 96rpx;
    margin: 20rpx auto;
    background-color:#706EEE; 
    border-radius: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;
  }
}
.Commbox {
  width: 100%;

  .msgbox {
    // background-color: #f6f6f6;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;

    .comment {
      color: #afafaf;
      font-size: 28rpx;

      word-break: break-all;

      text {
        box-sizing: border-box;
        font-weight: 500;
        font-size: 28rpx;
        color: #5f698b;
        padding-right: 10rpx;
      }

      .reviewC {
        font-weight: 500;
        font-size: 28rpx;
        color: #1d1d1d;
        // margin: 0 10rpx;
      }

      >text:last-child {
        font-weight: 500;
        font-size: 28rpx;
        color: #1d1d1d;
        word-break: break-all;
        margin-left: 10rpx;
      }
    }
  }
}

.vipiconimg {
  width: 144rpx;
  height: 48rpx;
}

.superlike {
  display: flex;
  text-align: center;
  justify-items: center;
  width: 178rpx;
  color: #fff;
  background: linear-gradient(135deg, #f9bb1d 0%, #fc781f 100%);
  border-radius: 5px;
  border: 2px solid #efca11;
  font-size: 24rpx;
  margin-top: 10rpx;
  line-height: 20px;
  height: 40rpx;
  letter-spacing: 0px;
  margin-right: 14rpx;
}

.ball {
  box-shadow: 0 0 8rpx #ccc;
  margin: 20rpx 20rpx;
  margin-bottom: 30rpx;
  padding: 24rpx;
  background-color: #fff;
  border-radius: 24rpx;
  display: flex;
  align-items: center;

  .ball_info {
    flex: 1;
    display: flex;
    align-items: center;

    .head {
      width: 120rpx;
      height: 120rpx;
      border-radius: 24rpx;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .tips {
      margin-left: 20rpx;

      .tit {
        color: #333;
        font-size: 40rpx;
        font-weight: bold;
      }

      .lit {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        color: #999;
        margin-top: 5rpx;

        text {
          font-size: 24rpx;
        }

        .wujiaox {
          width: 156rpx;
          height: 28rpx;
          margin-left: 5rpx;
          margin-top: 5rpx;
        }
      }
    }
  }

  .rightGroup {
    .ballFee {
      display: flex;
      justify-content: center;
      color: #333333;

      .feeIcon {
        font-size: 25rpx;
        display: flex;
        align-items: center;
      }

      .feeNum {
        color: #333333;
        font-weight: bold;
        font-size: 45rpx;
      }
    }

    .ball_btn {
      color: #f9ddaf;
      background-image: linear-gradient(-90deg, #0c0c0c, #494438);
      height: 50%;
      font-size: 26rpx;
      padding: 10rpx 24rpx;
      border-radius: 50rpx;
    }
  }
}

.backimg {
  position: fixed;
  top: 7%;
  left: 36rpx;
  z-index: 9999;
  width: 52rpx;
  height: 52rpx;
}

.user_visitior {
  position: absolute;
  top: 542rpx;
  left: 0;
  background-color: #fff;
  z-index: 2;
  width: 100%;
  border-radius: 24rpx 24rpx 0 0;
  transition: 0.5s;
}

.openBg {
  transition: 0.5s;
  transform: translateY(300rpx);
}

.user_data {
  padding-left: 40rpx;
}

.pop_con {
  height: 400rpx;
  background: #fff;
  width: 650rpx;
  border-radius: 16rpx;
  border: 1px solid #fef0bc;
  padding-bottom: 10rpx;

  .hd {
    height: 120rpx;
    line-height: 120rpx;
    border-bottom: 1px solid #eee;
    text-align: center;
    line-height: 90rpx;
    color: #333;
    font-weight: bold;
  }

  .desc {
    color: #999;
    font-size: 24rpx;
    text-align: center;
    padding-top: 20rpx;
  }

  .inp {
    margin-top: 30rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;

    .lab {
      font-size: 32rpx;
      color: #666;
    }

    input {
      margin-top: 10rpx;
      height: 80rpx;
      line-height: 80rpx;
      width: 100%;
      padding-left: 10rpx;
      box-sizing: border-box;
      border: 1px solid #eee;
      border-radius: 10rpx;
      color: #000;
    }
  }

  .btns {
    margin-top: 40rpx;
    display: flex;
    padding-left: 30rpx;
    padding-right: 30rpx;
    justify-content: space-between;

    /deep/ .u-button__text {
      color: #666;
    }

    /deep/ .u-button--success {
      text {
        color: #fff !important;
      }

      background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
    }

    /deep/ .u-button {
      width: 290rpx;
    }
  }
}

.dynamic:nth-child(1) {
  margin-top: 0;
}

.tabs {
  height: 44px;
}

.friends_path {
  padding-top: 28rpx;
  padding-bottom: 36rpx;
  width: 100%;
  display: flex;
  flex-flow: row;

  image {
    width: 80rpx;
    height: 80rpx;
  }

  .arrow_item {
    margin-top: 28rpx;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 80rpx;
  }

  .friend_item {
    margin-top: 28rpx;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 200rpx;

    .arrow {
      justify-content: center;
    }

    .user-name {
      font-size: 28rpx;
      color: #ffffff;
      overflow: hidden; //超出一行文字自动隐藏
      text-overflow: ellipsis; //文字隐藏后添加省略号
      white-space: nowrap; //强制不换行
    }
  }
}

.page_top {
  position: fixed;
  top: 0;
  left: 0;
  width: 750rpx;
  box-sizing: border-box;
  transition: 0.3s all;

  // background: #29282c;
  // z-index: 999999;
  .tabsBack {
    height: 44px;
    padding-left: 32rpx;
    display: flex;
    align-items: center;
    z-index: 999;

    .topTitle {
      padding-left: 20rpx;
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
      width: 300rpx;
    }

    .blackbox {
      width: 52rpx;
      height: 52rpx;
      display: flex;
      align-items: center;
    }

    image {
      width: 24rpx;
      height: 36rpx;
      display: block;
    }
  }

  .tabs {
    position: relative;
    display: flex;
    // align-items: center;
    height: 900rpx;

    .changeImg {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 60rpx;
      right: 10rpx;
      font-size: 20rpx;
    }

    >image {
      width: 100%;
      height: 100%;
    }

    .name {
      font-size: 36rpx;
      color: #fff;
      padding-left: 20rpx;
      width: 200rpx;
    }

    button {
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      right: 40rpx;
      top: 40rpx;
      text-align: center;
      line-height: 50rpx;

      image {
        width: 50rpx;
        height: 50rpx;
      }
    }

    .onlin {
      position: absolute;
      left: 40rpx;
      top: 6%;
      width: 208rpx;
      height: 44rpx;
      background: #ffffff;
      border-radius: 22px;
      line-height: 44rpx;
      color: #1db468;
      font-size: 24rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;

      &::before {
        content: "";
        display: inline-block;
        background: #1db468;
        width: 12rpx;
        height: 12rpx;
        border-radius: 8rpx;
        margin-right: 8rpx;
      }
    }
  }
}

.openBg {}

page {
  background: #fff;
}

.wap {
  // padding-left: 38rpx;
  // padding-right: 38rpx;
}

.selfSay {
  font-weight: 500;
  font-size: 28rpx;
  color: #999999;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  word-break: break-all;
  padding: 0 32rpx;

  text {
    color: #999999;
  }
}

.border-bottom {
  height: 1px;
  margin-left: 38rpx;
  margin-right: 38rpx;
  border-bottom: 1px solid #505157;
}

.user_info {
  position: relative;

  .info {
    display: flex;
    position: relative;
    height: 130rpx;

    .left {
      width: 176 + 32rpx;
      flex-shrink: 0;

      .coachbox {
        position: absolute;
        top: 180rpx;
        left: 67rpx;
        width: 90rpx;
        height: 32rpx;

        .coachimg {
          width: 90rpx;
          height: 32rpx;
        }
      }

      .assbox {
        position: absolute;
        top: 180rpx;
        left: 70rpx;
        width: 90rpx;
        height: 32rpx;

        .assistantimg {
          width: 90rpx;
          height: 32rpx;
        }
      }

      .cover {
        height: 160rpx;
        width: 160rpx;
        overflow: hidden;
        border: 4rpx solid #ffffff;
        border-radius: 160rpx;
        position: relative;
        top: -50rpx;

        .headimg {
          height: 100%;
          width: 100%;
        }
      }
    }

    .navBox {
      display: flex;
      margin-left: auto;
      width: 100%;

      .navItem {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 25%;

        &:not(:last-child)::after {
          content: "";
          display: block;
          width: 2rpx;
          height: 26rpx;
          right: 0;
          background-color: #e6e6e6e3;
          position: absolute;
        }

        .num {
          color: rgba(51, 51, 51, 1);
          font-size: 32rpx;
        }

        .content {
          color: rgba(153, 153, 153, 1);
          font-size: 24rpx;
        }
      }

      .navItem:first-child {
        margin-left: 0;
      }
    }
  }

  .right {
    padding: 0 30rpx;
    margin-top: 10rpx;

    .right_1 {
      display: flex;
      align-items: center;
      // margin-bottom: 15rpx;

      .info_r {
        display: flex;
        align-items: center;

        >image {
          width: 76rpx;
          margin-left: 10rpx;
        }

        .diyBlock {
          max-width: 360rpx;
          display: inline-block;
        }
      }
      .addwx {
				width: 176rpx;
        height: 56rpx;
        background: #706EEE;
        border-radius: 28rpx;
				font-size: 28rpx;
        color: #fff;
				margin-left: auto;
				display: flex;
        align-items: center;
        justify-content: center;
				.wxjiao {
					width: 40rpx;
					height: 40rpx;
          margin-right: 4rpx;
				}
			}
      .reportimg {
        flex: 1;
        padding: 10rpx;
        padding-bottom: 0;
        width: 40rpx;
        height: 40rpx;
      }

      .name {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        line-height: 50rpx;
        text-align: right;
        font-style: normal;
      }

      .member1 {
        width: 68rpx;
        height: 32rpx;
        background: linear-gradient(90deg, #fdf9f6 0%, #e1c4a6 100%);
        font-size: 16rpx;
        text-align: center;
        line-height: 32rpx;
        color: #4c310c;
        margin-right: 10rpx;
      }

      .member2 {
        width: 68rpx;
        height: 32rpx;
        background: linear-gradient(180deg, #3d3d3d 0%, #636363 100%);
        font-size: 16rpx;
        text-align: center;
        line-height: 32rpx;
        color: #e5e7ea;
        margin-right: 10rpx;
      }

      .member3 {
        width: 68rpx;
        height: 32rpx;
        background: linear-gradient(180deg, #3d3d3d 0%, #636363 100%);
        font-size: 16rpx;
        text-align: center;
        line-height: 32rpx;
        color: #e5e7ea;
        margin-right: 10rpx;
      }

      .wealth {
        // width: 80rpx;
        // color: #4C310C;
        // font-size: 16rpx;
        text-align: center;
        line-height: 30rpx;
        position: relative;

        // background: linear-gradient(90deg, #B98B51 0%, #FEF0BC 100%);
        .weatext {
          color: #f99f38;
          font-size: 22rpx;
          position: absolute;
          top: 8rpx;
          left: 46rpx;
          font-weight: 600;
        }

        .wealimg {
          width: 100rpx;
          height: 30rpx;
        }
      }

      .text-edit {
        border-radius: 28rpx;
        border: 1px solid rgba(230, 230, 230, 1);
        display: flex;
        padding: 6rpx 22rpx 6rpx 22rpx;
        justify-content: center;
        align-items: center;
        // margin-left: auto;
      }
    }

    .right_2 {
      display: flex;
      margin-bottom: 10rpx;
      color: rgba(102, 102, 102, 1);
      font-size: 28rpx;

      .Birthday {
        padding-right: 10rpx;
        border-right: 1rpx solid #999999;
      }

      .gdid {
        color: #999999;
        border-right: 1rpx solid #999999;
        font-size: 24rpx;
        padding-right: 10rpx;
      }

      .cons {
        color: #999999;
        border-right: 1rpx solid #999999;
        font-size: 24rpx;
        padding: 0 10rpx;
        margin-right: 5rpx;
      }

      .city {
        margin-left: 15rpx;
      }
    }

    .mytag {
      display: flex;
      flex-wrap: wrap;
      // padding: 14rpx 0rpx;
      padding-top: 8rpx;
      padding-bottom: 0;

      .tag {
        border-radius: 50rpx;
        color: #111;
        font-size: 22rpx;
        // background-color: #1c1616;
        padding: 4rpx 12rpx;
        margin-right: 14rpx;
        margin-bottom: 10rpx;
        border: 2rpx solid #706eee;
      }

      .tag_add {
        // background-color: #3d3d3d;
        width: 110rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #706eee;
        padding: 4rpx 10rpx;
        border: 2rpx solid #706eee;

        input {
          color: #fff;
          font-size: 26rpx;
          width: 100%;
          text-align: center;
        }

        .input-placeholder {
          font-size: 26rpx;
        }
      }
    }

    .right_info {
      line-height: 50rpx;

      image {
        height: 32rpx;
        width: 32rpx;
        margin-right: 10rpx;
      }

      text {
        display: inline-block;
        padding-right: 16rpx;
        font-size: 34rpx;
        color: #fff;
      }
    }

    .gonum {
      margin-top: 20rpx;
      line-height: 30rpx;
      display: flex;
      align-items: center;
      width: 100%;

      .lab {
        color: #d2d2d4;
        font-size: 24rpx;
        padding-right: 10rpx;
      }

      .num {
        color: #fff;
        font-size: 30rpx;
        padding-left: 10rpx;
        padding-right: 10rpx;
        //text-decoration: underline;
      }

      .wealth {
        text-align: center;
        justify-items: center;
        width: 68rpx;
        color: #fff;
        background: linear-gradient(135deg, #f9bb1d 0%, #fc781f 100%);
        border-radius: 5px;
        border: 2px solid #efca11;
        font-size: 24rpx;
        margin: 15rpx;
      }

      .member_huan {
        position: relative;
        height: 32rpx;
        line-height: 32rpx;
        font-size: 24rpx;
        background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
        color: #4c310c;
        padding-left: 40rpx;
        padding-right: 12rpx;
        margin-left: 44rpx;

        &::before {
          position: absolute;
          top: -22rpx;
          left: -28rpx;
          height: 64rpx;
          width: 64rpx;
          content: "";
          background: url("https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17103822832081089.png") no-repeat center center;
          background-size: 64rpx 64rpx;
        }
      }

      .member_hei {
        position: relative;
        height: 32rpx;
        line-height: 32rpx;
        font-size: 24rpx;
        background: linear-gradient(180deg, #3d3d3d 0%, #636363 100%);
        color: #e5e7ea;
        padding-left: 40rpx;
        padding-right: 12rpx;
        margin-left: 44rpx;

        &::before {
          position: absolute;
          top: -22rpx;
          left: -28rpx;
          height: 64rpx;
          width: 64rpx;
          content: "";
          background: url("https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710382378135992.png") no-repeat center center;
          background-size: 64rpx 64rpx;
        }
      }

      .member_hei_vip {
        position: relative;
        height: 32rpx;
        line-height: 32rpx;
        font-size: 24rpx;
        background: linear-gradient(180deg, #3d3d3d 0%, #636363 100%);
        color: #e5e7ea;
        padding-left: 40rpx;
        padding-right: 12rpx;
        margin-left: 44rpx;

        &::before {
          position: absolute;
          top: -22rpx;
          left: -28rpx;
          height: 64rpx;
          width: 64rpx;
          content: "";
          background: url("https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710382378135992.png") no-repeat center center;
          background-size: 64rpx 64rpx;
        }
      }
    }
  }
}

.album {
  padding-bottom: 150rpx;

  .blackimg {
    width: 48rpx;
    height: 8rpx;
    background-color: #0c0c0c;
    border-radius: 5rpx;
    margin-left: 42rpx;
  }

  .hd {
    margin-top: 40rpx;
    font-size: 32rpx;
    line-height: 38rpx;
    color: #333333;
    font-weight: 600;
    margin-bottom: 36rpx;
  }

  .title_right {
    position: absolute;
    right: 30rpx;
  }

  .list {
    // background: #262626;
    // padding-bottom: 20rpx;
    display: flex;
    flex-wrap: wrap;
    // margin-top: 8rpx;
    box-sizing: border-box;
    width: 95%;
    margin: 13rpx auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border-radius: 16rpx;
    box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.08);
    padding: 20rpx;
    box-sizing: border-box;

    .userbox {
      display: flex;
      width: 100%;

      .userimg {
        min-width: 80rpx;
        width: 80rpx;
        height: 80rpx;
        display: block;
        border-radius: 50%;
      }

      .middbox {
        margin-left: 24rpx;
        flex: 1;
        min-width: 424rpx;
        width: 424rpx;

        .name {
          width: 100%;
          font-size: 32rpx;
          color: #333333;
          font-weight: 600;
          display: flex;
          align-items: center;

          >image {
            width: 76rpx;
            margin-left: 10rpx;
          }
        }

        .daybox {
          font-weight: 400;

          .Birthday {
            font-size: 24rpx;
            color: #999999;
            // border-right: 1rpx solid #999999;
            padding: 0 15rpx 0 0;
          }

          .borderLine {
            color: #999999;
            font-size: 24rpx;
          }

          .city {
            font-size: 24rpx;
            color: #999999;
            margin-left: 15rpx;
          }
        }
      }

      .time {
        // margin-left: 268rpx;
        width: 140rpx;
        text-align: right;
        font-size: 24rpx;
        color: #999999;
      }
    }

    &::after {
      content: "";
      display: block;
      height: 1px;
      width: 325rpx;
    }

    .message {
      width: 100%;
      height: 80rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .name-avatar {
        height: 80rpx;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 10rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }

        .name {
          margin-left: 10rpx;
          font-size: 15px;
          font-weight: 600;
        }
      }

      .time {
        width: 200rpx;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 15px;
        text-align: right;
      }
    }

    .content {
      margin-top: 24rpx;
      // margin-bottom: 10rpx;
      font-size: 28rpx;
      color: #7b7b7b;
      width: 100%;
    }

    .diyC {
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      white-space: pre-line;
    }

    .imglist {
      box-sizing: border-box;
      width: 100%;
      margin: 10rpx 0 20rpx 0;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;

      .img {
        box-sizing: border-box;
        width: 180rpx;
        height: 180rpx;
        margin-top: 20rpx;
        margin-left: 18rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .ft_btn {
      width: 100%;
      margin-bottom: 10rpx;
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      // justify-content: flex-end;
      // justify-content: space-between;

      .citybottom {
        font-size: 24rpx;
        color: #999999;
      }

      .buttonbox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // width: 148rpx;
        font-size: 26rpx;
        margin-left: auto;

        .zan {
          display: flex;
          align-items: center;
        }
      }

      .boxWidth {
        width: 230rpx;
      }

      button {
        height: 44rpx;
        width: 44rpx;
        // margin-left: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          height: 44rpx;
          width: 44rpx;
        }
      }

      .icon_box {
        height: 48rpx;
        width: 48rpx;
        border-radius: 48rpx;
        background: rgba(255, 255, 255, 0.9);
        margin-right: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          height: 32rpx;
          width: 32rpx;
        }
      }

      .time {
        width: 75%;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 15px;
        text-align: left;
      }

      .icon_pad {
        width: 44rpx;
        height: 44rpx;
        padding-left: 25rpx;
        padding-right: 10rpx;
        text-align: left;
      }
    }

  }

  .empty {
    background: #fff;
    min-height: 500rpx;
  }

  .item {
    height: 336rpx;
    width: 336rpx;
    margin: 0 2rpx;
    margin-top: 2rpx;

    image {
      height: 100%;
      width: 100%;
      // border-radius: 10rpx;
    }

    &:nth-child(2n + 1) {
      margin-left: 0;
    }

    &:nth-child(2n) {
      margin-right: 0;
    }
  }

  .albumTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    position: relative;
    margin-top: 30rpx;

    // &::before {
    //   content: "";
    //   display: block;
    //   width: 95%;
    //   border-top: 1rpx solid #e4e4e4;
    //   position: absolute;
    //   top: 0;
    //   left: 50%;
    //   transform: translateX(-50%);
    // }

    .puadd {
      width: 100rpx;
      height: 46rpx;
      border-radius: 32rpx;
      background-color: #706eee;
      display: flex;
      justify-content: center;
      align-items: center;

      .putitle {
        color: #fff;
        font-size: 22rpx;
        font-weight: 400;
      }

      .releaseimg {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
}

.dis {
  line-height: 1.8;
}

.more {
  margin-top: -50rpx;
  text-align: right;

  text {
    background: #111;
    padding-left: 25rpx;
    padding-right: 25rpx;
    border-radius: 20rpx;
  }
}

.more2 {
  text-align: center;
}

.btm {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 144rpx;
  box-sizing: border-box;
  // background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .btn1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 320rpx;
    height: 96rpx;
    // background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
    border: 1rpx solid #333333;
    border-radius: 44rpx;

    image {
      height: 40rpx;
      width: 40rpx;
      margin-right: 8rpx;
    }

    text {
      color: #333333;
      font-size: 32rpx;
      // text-shadow: 0px 2px 2px rgba(141, 107, 62, 0.7);
    }
  }

  .btn2 {
    position: relative;
    width: 320rpx;
    //width: 100%;
    height: 96rpx;
    // background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
    background-color: #0d0d0d;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32rpx;

    image {
      height: 40rpx;
      width: 40rpx;
      margin-right: 8rpx;
    }

    text {
      font-size: 32rpx;
      color: #fff;
      line-height: 34px;
      // text-shadow: 0px 2px 2px rgba(132, 108, 82, 0.8);
    }

    .red_tips {
      position: absolute;
      top: -26rpx;
      right: 0;
      width: 134rpx;
      height: 50rpx;
      border-radius: 25rpx 25rpx 25rpx 0;
      font-size: 24rpx;
      color: #fff;
      background-color: #ef4034;
      display: flex;
      align-items: center;
      justify-content: center;
      // margin-left: -158rpx;
      // margin-top: -88rpx;
    }
  }
}

.settingwx_btn {
  width: 240rpx;
  //width: 100%;
  height: 50rpx;
  background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
}

.lookwx_btn {
  width: 120rpx;
  //width: 100%;
  height: 50rpx;
  background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
}

// #262626
.lookwx_pop {
  height: 400rpx;
  width: 600rpx;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border-radius: 16rpx;
  padding-top: 40rpx;
  padding-bottom: 40rpx;

  .cover {
    height: 100rpx;
    width: 100rpx;
    border-radius: 50%;

    image {
      height: 100%;
      width: 100%;
      border-radius: 50%;
    }
  }

  .name {
    color: #333;
  }

  .wx {
    color: #333;
  }

  .btn_sm {
    width: 200rpx;
  }
}

.m_friends_box {
  display: flex;
  // justify-content: space-between;
  width: 100%;
  align-items: center;

  .item {
    color: #d2d2d2;
    // margin: 0 auto;
    font-size: 24rpx;
    width: 186rpx;
    line-height: 40rpx;
  }

  .pop {
    width: 158rpx;
    font-size: 24rpx;
    font-weight: bold;
    line-height: 40rpx;
    color: #333330;
    line-height: 32rpx;

    image {
      width: 32rpx;
      height: 32rpx;
      vertical-align: middle;
    }
  }
}

.weixin {
  width: 650rpx;
  background-color: #fff;
  border-radius: 12rpx;
  padding-bottom: 40rpx;

  .weixin-title {
    text-align: center;
    color: #000;
    padding-top: 40rpx;

    .popup-close {
      font-size: 24rpx;
      position: absolute;
      right: 20rpx;
      color: #000;
      top: 15rpx;
    }
  }

  .weixin-desc {
    color: #a3a3a3;
    font-size: 24rpx;
    text-align: center;
    padding-top: 20rpx;
  }

  .weixin-tips {
    color: #d5391d;
    font-size: 24rpx;
    text-align: center;
    padding-top: 20rpx;
  }

  .member-desc {
    color: #a3a3a3;
    font-size: 24rpx;
    padding-left: 100rpx;
  }

  .weixin-price {
    font-size: 34rpx;
    padding-left: 20rpx;
    padding-top: 40rpx;
    color: #000;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .item_check {
      padding: 10rpx;
      display: flex;
      flex-direction: row;

      .desc {
        color: #000 !important;
      }
    }

    image {
      width: 100rpx;
      height: 100rpx;
    }

    input {
      border: 1rpx solid #d6c37e;
      width: 311rpx;
      height: 50rpx;
      color: #000 !important;
      padding-left: 10rpx;
    }

    .lab {
      color: #000;
      width: 30%;
      font-size: 28rpx;
    }
  }

  .weixin-btn {
    padding: 30rpx 50rpx 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .btn-cancel {
      width: 200rpx;
      height: 80rpx;
      border-radius: 5rpx;
      color: #000;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #000000;

      text {
        color: #000;
        font-size: 22rpx;
      }
    }

    .btn-sub {
      width: 200rpx;
      height: 80rpx;
      border-radius: 15rpx;
      background: linear-gradient(180deg, #fef0bc 0%, #b95222 100%);
      color: #4c310c;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #b98b51;
    }

    .btn-upgrade {
      width: 200rpx;
      height: 80rpx;
      border-radius: 5rpx;
      background: #000;
      color: #000;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #000000;
    }

    .btn-comfirm {
      width: 200rpx;
      height: 80rpx;
      border-radius: 15rpx;
      background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
      color: #4c310c;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #fef0bc;
    }
  }
}

.x-share {
  background-color: #ffffff;
  width: 750rpx;
  border-radius: 20rpx;
  padding: 40rpx 20rpx 80rpx;
  display: flex;
  box-sizing: border-box;

  .item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    image {
      width: 64rpx;
      height: 64rpx;
      margin-bottom: 10rpx;
    }

    span {
      color: #2e2e2e;
    }
  }
}

.x-popup {
  background-color: #ffffff;
  width: 650rpx;
  border-radius: 20rpx;
  padding-bottom: 20rpx;

  .popup-title {
    padding: 20rpx 0 10rpx;
    text-align: center;
    font-size: 32rpx;
    position: relative;
    color: #333;

    .xiaoju-popup-close {
      font-size: 24rpx;
      position: absolute;
      right: 50rpx;
      top: 10rpx;
      color: #333;
    }
  }

  .popup-wrap {
    max-height: 800rpx;
    min-height: 300rpx;
    padding-top: 10rpx;
    padding-bottom: 30rpx;

    .popup-cell {
      padding: 8rpx 40rpx;
      font-size: 30rpx;
      line-height: 44rpx;
    }
  }

  .popup-tip {
    margin: 0 auto;
    width: 100%;
    height: 55rpx;
    color: #4c310c;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 20rpx;
  }

  .popup-btn {
    margin: 0 auto;
    width: 200rpx;
    height: 60rpx;
    border-radius: 10rpx;
    color: #fff;
    font-size: 28rpx;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fd4c61;
  }
}

.x-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 0 60rpx;

  .list-cell {
    width: 27%;
    height: 170rpx;
    border: 2rpx solid #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 5rpx 0rpx 10rpx;
    border-radius: 16rpx;
    position: relative;

    &.list-active {
      border-radius: 16rpx;
      border: 2rpx solid #70737c;
    }

    .list-btn {
      width: calc(100% + 4rpx);
      height: 52rpx;
      color: #fff;
      background: #fd4c61;
      border-radius: 0rpx 0rpx 16rpx 16rpx;
      position: absolute;
      bottom: -2rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;

      .count {
        color: #fff;
        line-height: 60rpx !important;
        // margin-right: 5rpx;
      }

      .add {
        display: flex;
        justify-content: center;
        align-items: center;
        /* border: 2rpx solid #ccc; */
        box-sizing: border-box;
        font-size: 52rpx;
        width: 75rpx;
        color: #fff;
      }
    }

    .list-icon {
      width: 80rpx;
      height: 80rpx;
    }

    .list-name {
      color: #333;
      font-size: 26rpx;
      margin-top: 8rpx;
    }

    .list-price {
      color: #333;
      font-size: 22rpx;
      margin-top: 5rpx;
    }
  }
}

.member-list {
  width: 540rpx;
  display: flex;
  justify-content: space-between;
  margin: 40rpx auto;

  .member-item {
    width: 260rpx;
    height: 285rpx;
    box-sizing: border-box;
    padding: 40rpx 0rpx 10rpx;
    border: 2rpx solid #dba46e;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    position: relative;

    &.active {
      border-color: #dba46e;
      border: 2rpx solid #dba46e;
      box-shadow: 0 0 15px #fff;

      .title {
        color: #fff;
      }

      .price {
        font-size: 28rpx;
        color: #fff;

        text {
          color: #fff;
          font-size: 36rpx;
        }
      }

      .name {
        color: #b5b5b5;

        text {
          text-decoration: #b5b5b5 line-through;
        }
      }

      .desc {
        background-color: #dba46e;
        color: #fff;
      }
    }

    .title {
      height: 60rpx;
      font-size: 38rpx;
      color: #b5b5b5;
      padding-top: 15rpx;
      padding-bottom: 15rpx;

      span {
        font-size: 24rpx;
        margin-left: 5rpx;
      }
    }

    .price {
      height: 40rpx;
      font-size: 28rpx;
      color: #b5b5b5;

      text {
        color: #b5b5b5;
        font-size: 36rpx;
      }
    }

    .name {
      height: 50rpx;
      line-height: 60rpx;
      font-size: 30rpx;
      color: #b5b5b5;

      text {
        text-decoration: #b5b5b5 line-through;
      }
    }

    .desc {
      width: 260rpx;
      height: 65rpx;
      position: absolute;
      top: -30rpx;
      background-color: #dba46e;
      border-radius: 10rpx;
      color: #fff;
      font-size: 26rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.bottombox {
  width: 100%;
  height: 170rpx;
  position: relative;
  z-index: 9999;
}

.box_6 {
  box-shadow: 0px -2px 4px 0px rgba(20, 20, 20, 0.1);
  background-color: rgba(255, 255, 255, 1);
  width: 750rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx;
  position: fixed;
  bottom: 0rpx;
  z-index: 9999;
  padding-bottom: 40rpx;
  transition: 0.5s;
}

.image-text_1 {
  display: flex;
  flex-direction: column;

  >button {
    height: 50rpx;

    >image {
      width: 48rpx;
    }
  }
}

.label_2 {
  width: 48rpx;
  height: 48rpx;
}

.text-group_2 {
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 24rpx;
  font-family: PingFang-SC-Medium;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 34rpx;
  margin-top: 4rpx;
}

.text-wrapper_1 {
  background-color: rgba(51, 51, 51, 1);
  border-radius: 44rpx;
  display: flex;
  justify-content: center;
  padding: 20rpx 32%;
  // margin-right: 70rpx;
}

.text_11 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 32rpx;
  font-family: PingFang-SC-Bold;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 52rpx;
}

.stickyBg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100rpx;
  background: transparent;
  padding-top: 80rpx;
}

.topNavBg {
  background: white;
}

.stickyName {
  position: absolute;
  bottom: 28rpx;
  left: 50%;
  transform: translateX(-50%);
}

.text_5 {
  overflow-wrap: break-word;
  font-size: 28rpx;
  font-family: PingFang-SC-Medium;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 40rpx;
}

.isNone {
  transition: 0.5s;
  opacity: 0;
}

.x-share {
  z-index: 9999;
  background-color: #ffffff;
  width: 750rpx;
  border-radius: 20rpx;
  padding: 40rpx 20rpx 80rpx;
  display: flex;
  box-sizing: border-box;

  .item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    image {
      width: 64rpx;
      height: 64rpx;
      margin-bottom: 10rpx;
    }

    span {
      color: #2e2e2e;
    }
  }
}

.share_tips {
  padding-top: 150rpx;
  box-sizing: border-box;

  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  position: relative;
  display: flex;
  justify-content: center;

  .tips_close {
    position: absolute;
    padding: 14rpx 24rpx;
    border-radius: 50rpx;
    border: 4rpx solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30rpx;
    font-weight: bold;
    top: 36%;
    left: 50%;
    transform: translate(-50%, 0);

    image {
      width: 100%;
      height: 100%;
    }
  }
}
.tabbox {
  // width: 704rpx;
  width: 100%;
  height: 116rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
  margin-top: 20rpx;
  background-color: #fefefe;
  border-bottom: 1rpx solid #E4E4E4;

  .navtitle {
    width: calc(100% / 3);
    height: 100%;
    color: #999999;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .text4 {
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
  }

  .aft4 {
    width: 40rpx;
    height: 8rpx;
    background: #706EEE;
    border-radius: 4rpx;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
.cirlistBox {
  width: 100%;
  padding: 24rpx;
}

.cirlist {
  position: relative;
  width: 100%;
  height: 548rpx;
  border-radius: 24rpx;
  // padding: 36rpx 32rpx;
  // background-color: #9796ed;
  // margin: 0 auto;
  margin-bottom: 24rpx;

  .cirinfobox {
    position: relative;
    display: flex;
    align-items: center;
    // margin-bottom: 32rpx;
    padding: 36rpx 32rpx;
    z-index: 10;

    .hdimg {
      min-width: 104rpx;
      max-width: 104rpx;
      height: 104rpx;
      border-radius: 16rpx;
      border-radius: 50%;
      border: 4rpx solid #FFFFFF;
      margin-right: 24rpx;
    }

    .cirinfo {
      flex: 1;

      .cirname {
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 16rpx;
      }

      .cirrem {
        width: 400rpx;
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }

    .cirjoin {
      width: 120rpx;
      height: 56rpx;
      background: #6C6AFF;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .joinimg {
        width: 24rpx;
        height: 24rpx;
      }

      .jointext {
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }

    .cirquit {
      width: 120rpx;
      height: 56rpx;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #E4E4E4;

      .joinimg {
        width: 24rpx;
        height: 24rpx;
      }

      .jointext {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }

  .activitybox {
    position: relative;
    width: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 10;
    padding-right: 32rpx;

    .actcon {
      width: 584rpx;
      height: 336rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      // margin-right: 30rpx;
      display: flex;
      align-items: center;
      margin-left: 32rpx;

      .actimg {
        width: 256rpx;
        min-width: 256rpx;
        height: 336rpx;
        border-radius: 24rpx 0rpx 0rpx 24rpx;
        // background-color: red;
      }

      .actright {
        // flex: 1;
        padding: 24rpx;
        height: 100%;
        width: 328rpx;
        display: flex;
        flex-flow: column;
        justify-content: space-between;

        .actname {
          font-size: 28rpx;
          font-weight: bold;
          color: #333333;
          margin-bottom: 60rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .actgup {
          display: flex;
          margin-bottom: 8rpx;

          .actgupimg {
            width: 32rpx;
            height: 34rpx;
            margin-right: 4rpx;
          }

          .actguptext {
            font-size: 24rpx;
            color: #999999;
            // flex: 1;
            width: 208rpx;
          }
        }

        .actgup2 {
          display: flex;
          margin-top: 26rpx;
          justify-content: flex-end;
          align-items: center;

          .peoplenum {
            font-size: 20rpx;
            color: #999999;
            margin-right: 16rpx;
          }

          .imgbox {
            display: flex;
          }

          .peoImg {
            width: 32rpx;
            height: 32rpx;
            border-radius: 50%;
            margin-left: -9rpx;
            // background-color: #706eee;
          }
        }
      }
    }
  }

  .blackshadow2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 24rpx;
    backdrop-filter: blur(10px);

  }
}
.video_box {
  width: 100%;
  height: 500rpx;
  position: relative;
  z-index: 2;
  margin-top: 10rpx;
  video {
    width: 50%;
    height: 100%;
    // margin-top: 10rpx;
    
  }
  .v_imgbox{
    width: 70%;
    position: relative;
  }
  .videoimg{
    display: block;
  }
  .playimg{
      width: 96rpx;
      height: 96rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
}
</style>
